<template>
  <div>
    <div class="item" @click="handleClick">
      <div class="colorLump" :style="{ backgroundColor: themeData.color }">
        <span class="iconfont" :class="current ? 'iconcheck' : ''"></span>
      </div>
      <div class="text">{{ themeData.colorText }}</div>
      <div
        class="btn"
        :style="[
          { borderColor: current ? themeData.color : '' },
          { color: current ? themeData.color : '' },
        ]"
      >
        {{ current ? "使用中" : "使用" }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["themeData", "current"],
  methods: {
    handleClick() {
      this.$emit("themeBtn");
    },
  },
};
</script>

<style lang="less" scoped>
.item {
  display: flex;
  align-items: center;
  padding: 0 12 / 360 * 100vw;
  height: 46 / 360 * 100vw;
  border-bottom: 1px solid #ccc;
  .colorLump {
    width: 20 / 360 * 100vw;
    height: 20 / 360 * 100vw;
    line-height: 20 / 360 * 100vw;
    background-color: red;
    border-radius: 50%;
    margin-right: 10 / 360 * 100vw;
    text-align: center;
    .iconcheck {
      color: #fff;
    }
  }
  .text {
    flex: 1;
    font-size: 14 / 360 * 100vw;
  }
  .btn {
    width: 42 / 360 * 100vw;
    border: 1px solid #333;
    height: 26 / 360 * 100vw;
    line-height: 26 / 360 * 100vw;
    padding: 0 10 / 360 * 100vw;
    font-size: 14 / 360 * 100vw;
    border-radius: 6 / 360 * 100vw;
    text-align: center;
  }
}
</style>
